import {Component} from "@angular/core";
import {Hero} from "./hero";
import {ClickMeComponent} from "./click-me.component";
import {KeyupComponent_v1, KeyupComponent_v2, KeyupComponent_v3} from "./keyup.component";
import {LoopbackComponent} from "./loop-back.component";
import {LittleTourComponent} from "./little-tour.component";

@Component({
    selector: 'my-app',
    template: `
<h1>{{title}}</h1>
<h2>My favorite hero is: {{myHero.name}}</h2>
<p>Heroes:</p>
<ul>
    <li *ngFor="let hero of heroes">
        {{hero.name}}
    </li>
</ul>
<p *ngIf="heroes.length > 3">There are many heroes!</p>
<click-me></click-me>
<keyup-v1></keyup-v1>
<keyup-v2></keyup-v2>
<keyup-v3></keyup-v3>
<loop-back></loop-back>
<little-tour></little-tour>
    `,
    directives: [ClickMeComponent,
        KeyupComponent_v1, KeyupComponent_v2, KeyupComponent_v3,
        LoopbackComponent, LittleTourComponent]
})
export class AppComponent {
    title = 'Tour of Heroes'
    heroes = [
        new Hero(1, 'Windstorm'),
        new Hero(13, 'Bombasto'),
        new Hero(15, 'Magneta'),
        new Hero(20, 'Tornado')
    ]
    myHero = this.heroes[0]
}